<template>
	<view>
		<view class="tab-box">
			<u-tabs bg-color="#ffffff" inactive-color="#999" name="name" :list="tabs" active-color="#616161"
				:is-scroll="false" c :current="current" @change="tabChange"></u-tabs>
		</view>
		<view class="msg-wrap">
			<block v-for="(item,index) in lists" :key="index">
				<view class="comment-msg-item">
					<navigator :url="'/pages/user/home?uuid='+ item.user.uuid" hover-class="none">
						<cos-avatar class="avatar" :src="item.user.avatar" :showSex="item.user.gender?true:false" :sexIcon="item.user.gender_label"></cos-avatar>
					</navigator>
					<view class="msg-c" @tap="jump('/pages/message/shootDetails?id='+item.id)">
						<view class="msg-c-t d-flex align-items-center justify-content-between">
							<view>
								<view class="username d-flex align-items-center">
									<view class="mr-10">{{item.user.nickname}}</view>
									<view class="tag-box d-flex" v-if="item.user.is_guaranty || item.user.is_cert">
										<view class="mr-10 tag tag-guaranty" v-if="item.user.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='23'></u-icon>已担保</view>
										<view class="mr-10 tag tag-cert" v-if="item.user.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='23'></u-icon>已认证</view>
									</view>
								</view>
								<view class="text-color-assist">
									<text class="mr-10" v-if="item.user.city||item.user.province">{{item.user.city||item.user.province}} |</text>
									<text class="mr-10">{{ item.user.identity_label }}</text>
								</view>
							</view>
							<!-- <u-icon @tap.stop="onAuditing(item, index)" class="arrow-down" size="40" name="setting"></u-icon> -->
						</view>
						<view class="msg-c-txt">
							<text>{{item.type=='shoot'?'约拍请求：':'联系请求：'}}{{item.demand}}</text>
							<text v-if="item.status === 0" class="dot"></text>
						</view>
						<view class="post-c mb-20">
							<view class="post-c-txt">
								{{item.post.demand||item.post.describe}}
							</view>
						</view>
						<view class="d-flex align-items-center justify-content-between text-color-assist">
							<view>{{$f.timeAgo(item.time_diff)}} | {{item.type_label}}</view>
							<view v-if="item.status==0">待查看</view>
							<view v-if="item.status==1">未获取对方的联系方式</view>
							<view v-if="item.status==2">已获取对方的联系方式</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view style="margin: 30rpx 0;">
			<u-loadmore :status="loadStatus" />
		</view>
		<!-- 查看联系方式弹窗 -->
		<u-action-sheet cancel-btn="true" mask-close-able="true"
		@click="contacActionclick" :list="contactList" v-model="contactShow" :safe-area-inset-bottom="true"></u-action-sheet>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	computed:{
		...mapState(['hasLogin', 'userInfo']),
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		if(this.loadStatus!='nomore') {
			this.page++;
			this.loadStatus = 'loading'
			this.getList();
		}
	},
	data() {
		return {
			tabs: [{
					name: '全部',
					status:'all'
				},{
					name: '待查看',
					status:0
				},{
					name: '未获取',
					status:1
				},{
					name: '已获取',
					status:2
				}
			],
			current:0,
			lists:[],
			page:1,
			loadStatus:'loading',
		};
	},
	methods: {
		tabChange(index) {
			if(this.current==index) return;
			this.current = index;
			this.page = 1;
			this.loadStatus = 'loading';
			this.lists = [];
			this.getList();
		},
		async getList() {
			let res = await this.$api('acceptMessage')
			this.lists = this.lists.concat(res.data.list);
			if (this.page === res.data.total_pages || res.data.total_pages === 0) {
				this.loadStatus = 'nomore';
			} else {
				this.loadStatus = 'loadmore';
			}
		},
		jump(url) {
			uni.navigateTo({
				url:url
			})
		}
	}
};
</script>

<style lang="scss" scoped>

.nav-icon {
	width: 90rpx;
	height: 90rpx;
	margin-bottom: 10rpx;
}

.msg-wrap{
	background-color: #FFFFFF;
	margin-top: 20rpx;
	.title{
		margin: 20rpx;
	}
	.msg-item{
		padding: 20rpx;
		display: flex;
		.avatar-box{
			position: relative;
			.avatar{
				margin-right: 20rpx;
				
			}
		}
	
		.right{
			display: flex;
			flex-direction: column;
			flex: 1;
			.desc{
				font-size: 24rpx;
				color: #999;
				display: flex;
				.time{
					white-space: nowrap;
					margin-left: auto;
				}
			}
		}
	}
}

  // 
  .msg-empty{
	  display: flex;
	  flex-direction: column;
	  align-items:center ;
	  min-height: 800rpx;
	  .img{
		 width: 200rpx;
		 margin-top: 100rpx;
	  }
	  .txt{
		  color: #999;
		  font-size: 20rpx;
		  margin-top: 20rpx;
	  }
  }
  
.comment-msg-item {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #f5f5f5;
	padding: 20rpx;
}
.comment-msg-item .msg-c{
  	width: 100%;
}
.comment-msg-item .avatar {
  	margin-right: 10rpx;
}
  
.comment-msg-item .post-c {
  	background-color: #eee;
  	margin-top: 20rpx;
  	padding: 20rpx;
  	font-size: 12px;
  	line-height: 1.8;
  	border-radius: 10rpx;
}
  
.comment-msg-item .post-c .post-c-txt {
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	word-break: break-all;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 5;
  	overflow: hidden;
}
  
.comment-msg-item .msg-c {
  	display: flex;
  	flex-direction: column;
}
.comment-msg-item .msg-c .msg-c-t{
	margin-bottom: 20rpx;
  	display: flex;
}
  
.comment-msg-item .msg-c .msg-c-t .time{
  	font-size: 10px;
  	color: #999;
  	margin-left: auto;
}
.comment-msg-item .msg-c .username {
  	margin-bottom: 10rpx;
  	color: #2B85E4;
}
.comment-msg-item .msg-c .msg-c-txt{
  	display: flex;
  	align-items: center;
}
.comment-msg-item .msg-c .msg-c-txt .dot{
  	width: 10rpx;
  	height: 10rpx;
  	background-color: #FA3534;
  	border-radius: 50%;
  	display: block;
  	margin-left: 20rpx;
}
.tag-box {
	.tag{
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #616161;
	}
	
	.tag-guaranty {
		color: #ffffff;
		background-color: #24B19A;
	}
	
	.tag-cert {
		color: #ffffff;
		background-color: #5A84FB;
	}
}
</style>
